<!-- 公共table组件 -->

<template>
  <el-table
    :data="tableData"
    stripe
    :height="tableHeight"
    style="width: auto; margin: 0 20px; box-sizing: border-box"
    :header-row-style="{ backgroundColor: '#EFEFEF', color: '#000', fontWeight: 400 }"
    :header-cell-style="{ backgroundColor: '#EFEFEF', color: '#000', fontWeight: 400 }"
  >
    <el-table-column
      v-for="(column, index) in tableColumns"
      :key="index"
      :prop="column.prop"
      :label="column.label"
      :type="column.type"
      :width="column.width"
      :align="column.align"
    >
      <template v-if="column.type === 'slot'" #default="{ row, $index }">
        <slot :name="column.slotName" :row="row" :index="$index" />
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
const props = defineProps({
  tableColumns: {
    type: Array,
    required: true,
  },
  tableData: {
    type: Array,
    default: () => [],
  },
  tableWidth: {
    type: String,
    default: 'auto',
  },
  tableHeight: {
    type: String,
    default: 'calc(100% - 0)',
  },
  tableHeaderColor: {
    type: String,
    default: '',
  },
})

const handleSizeChange = () => {}

const handleCurrentChange = () => {}
</script>

<style scoped></style>
